<template>
    <div>
        <el-container>
            <el-header>低代码开发平台</el-header>
            <el-container>
                <el-aside width="200px">
                    <el-menu class="el-menu-vertical-demo"
                        background-color="#37a39c" text-color="#fff" active-text-color="#ffd04b"
                        :unique-opened="true" :router="true"
                        >
                        <el-submenu :index="item.menuName" v-for="(item, index) in menuData" :key="item.menuName">
                            <template slot="title">
                                <i class="el-icon-location"></i>
                                <span>{{item.menuName}}</span>
                            </template>
                            <el-menu-item :index="sumitem.path" v-for="(sumitem, index) in item.children" :key="sumitem.menuName">
                                {{sumitem.menuName}}
                            </el-menu-item>
                        </el-submenu>
                    </el-menu>
                </el-aside>
                <el-main>
                    <router-view></router-view>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script>
    export default {
        name: 'CodeUIHome',

        data() {
            return {
                menuData:[
                    {
                        menuName:'导航一',
                        children:[
                            {
                                menuName:'用户管理',
                                path:'/home/adminlist'
                            },
                            {
                                menuName:'导航管理',
                                path:'/home/treelist'
                            },
                            {
                                menuName:'菜单管理',
                                path:'/home/menulist'
                            },
                            {
                                menuName:'角色管理',
                                path:'/home/rolelist'
                            }
                        ]
                    },
                    {
                        menuName:'导航二',
                        children:[
                            {
                                menuName:'用户添加',
                                path:'/home/admincreate'
                            }
                        ]
                    }
                ]
            };
        },

        mounted() {

        },

        methods: {

        },
    };
</script>

<style>
    .el-header,
    .el-footer {
        background-color: #37a39c;
        color: #fff;
        text-align: left;
        line-height: 60px;
    }

    .el-aside {
        background-color: #37a39c;
        color: #333;
        text-align: center;
        line-height: 200px;
    }

    .el-main {
        color: #333;
        height: calc(100vh - 60px);
    }

    body>.el-container {
        margin-bottom: 40px;
    }

    .el-container:nth-child(5) .el-aside,
    .el-container:nth-child(6) .el-aside {
        line-height: 260px;
    }

    .el-container:nth-child(7) .el-aside {
        line-height: 320px;
    }

    .el-submenu,
    .el-menu-item {
        text-align: left;
        width: 200px;
    }

    .el-submenu__title i{
        color: #fff;
    }
</style>